
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html</title>
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        body{
            font-size:30px;
            background-color: rgb(23,44,60);
            overflow: hidden;
        }
        #readme{
            position: absolute;
            left: 10%;
            top: 100px;
            width: 250px;
        }
        #readme > span{
            display: block;
            width: 100%;
            text-align: center;
            font-size: 18px;
            color: red;

        }
        #readme > p{
            display: block;
            font-size: 16px;
            text-indent: 20px;
            color: #75FFE7;
        }
        #tab{
            margin:100px auto 0;
            border-radius:15px;
            text-align:center;
            font-weight:bold;
            background-color: #999;
        }
        td{
            width:100px;
            height:100px;
            border-radius:15px;
        }
        #text{
            position: absolute;
            right: 15%;
            top: 100px;
            color: red;
        }
        #restart{
            font-size:22px;
            margin:25px;
            color: red;
            text-align:center;
            cursor: pointer;
        }
        #score{
            color:#75FFE7;
            font-size:36px;
        }
    </style>
</head>
<body>
    <div id="readme">
        <span>玩法说明：</span>
        <p>键盘上下左右键控制移动，相同的格子会累积加起来重叠为新的格子，当所有格子均占有并不能移动游戏结束。回车键(Enter)或点击重新开始重新开始游戏。加油吧，看谁能玩到2048.</p>
    </div>
    <table id="tab" cellspacing="6"></table>
    <div id="restart">重新开始</div>
    <div id="text" style="font-size:16px;">分数：<span id="score"></span>  分</div>
</body>
</html>

<script>
    var json = {
        result : false,//确保无变化时不生成随机数
        continuous : true,//确保每一纵或每一行每次只重叠一组相同数字，防止重复重叠
        //创建一个任意区间的random函数
        getRandom : function(min , max){
            return Math.round((max - min) * Math.random()) + min;
        },
        //初始化数据
        init : function () {
            var tab = document.getElementById("tab");
            var str = "",id = 1;
            for(var i = 1; i < 5; i++){
                str += "<tr>";
                for(var j = 1; j < 5; j++){
                    str += "<td id=" + id + "></td>";
                    id++;
                }
                str += "</tr>"
            }
            tab.innerHTML = str;
            for(i = 0; i < 2; i++){
                this.randomNum();
            }
            this.Result();
        },
        //16格中随机创建值为2或4的格子
        randomNum : function () {
            var num = this.getRandom(1 , 16);
            //防止格子重复，只在空的位置创建
            if(document.getElementById(num).innerHTML == ""){
                document.getElementById(num).innerHTML = "" + this.getRandom(1 , 2) * 2;
            }else{
                this.randomNum();
            }
        },
        //上键
        top : function () {
            for(var i = 1; i < 5; i++){
                this.continuous = true;
                for(var j = i; j <= i + 12; j += 4){
                    for(var k = j; k > 4; k -= 4){
                        var before=document.getElementById(k - 4),
                             after=document.getElementById(k);
                        this.change(before,after);
                    }
                }
            }
        },
        //下键
        bot : function () {
            for(var i = 1; i < 5; i++){
                this.continuous = true;
                for(var j = i + 12;j >= i; j -= 4){
                    for(var k = j; k < 13; k += 4){
                        var before = document.getElementById(k + 4),
                             after = document.getElementById(k);
                        this.change(before , after);
                    }
                }
            }
        },
        //左键
        left : function () {
            for(var i = 1; i <= 13; i += 4){
                this.continuous = true;
                for(var j = i; j <= i+3; j += 1){
                    for(var k = j; k > i; k-= 1){
                        var before = document.getElementById(k - 1),
                             after = document.getElementById(k);
                        this.change(before,after);
                    }
                }
            }
        },
        //右键
        right : function () {
            for(var i = 1; i <= 13; i += 4){
                this.continuous = true;
                for(var j = i + 4; j>= i; j -= 1){
                    for(var k = j; k < i+3; k += 1){
                        var before = document.getElementById(k + 1),
                             after = document.getElementById(k);
                        this.change(before,after);
                    }
                }
            }
        },
        //键盘事件触发合并
        change : function (before , after) {
            if(before.innerHTML == "" && after.innerHTML != ""){
                this.result = true;
                before.innerHTML = after.innerHTML;
                after.innerHTML = "";
            }else if(before.innerHTML != "" && before.innerHTML == after.innerHTML && this.continuous){
                before.innerHTML = parseInt(before.innerHTML) + parseInt(after.innerHTML);
                after.innerHTML = "";
                this.result = true;
                this.continuous = false;
            }
        },
        //设置颜色，计算积分
        Result : function () {
            var score = 0,
                 colors = {"":"#fff","2":"#00FF00","4":"#00CCFF","8":"#FF9900","16":"#00CC66","32":"#FFCCCC","64":"#FF33FF","128":"#0066CC",
                "256":"#6633CC","512":"#FF0099","1024":"#990033","2048":"#6600FF","4096":"#CC0066"};
            for(var i = 1; i <= 16; i++){
                var text = document.getElementById(i);
                text.style.backgroundColor = colors[text.innerHTML];
                if(text.innerHTML != ""){
                    score += parseInt(text.innerHTML) * 10;
                }
            }
            document.getElementById("score").innerHTML = "" + score;
        }
    };
    //初始化入口
    window.onload = json.init();
    //点击键盘事件
    document.body.onkeydown = function (e) {
        e = e || event;
        console.log(e.keyCode);
        json.result = false;
        if (/37/.test("" + e.keyCode)) json.left();
        if (/38/.test("" + e.keyCode)) json.top();
        if (/39/.test("" + e.keyCode)) json.right();
        if (/40/.test("" + e.keyCode)) json.bot();
        if (/13/.test("" + e.keyCode)) json.init();

        if(json.result) {
            json.randomNum();
        }
        json.Result();
    };
    //重新开始点击事件
    (function () {
        var oRestart = document.getElementById("restart");
        oRestart.onclick = function () {
            json.init();
        };
    })();
</script>

</html>